{extend name="property/public/insidePageBase" /}
{block name="title"}添加房间{/block}
{block name="css"}
{__block__}
<style>
    body{ margin:0; }
    .layui-iconpicker-body.layui-iconpicker-body-page .hide {display: none;}
    body .layui-iconpicker .layui-iconpicker-icon-item{ width: 20.1%; }
    body{  background-color: #ffffff; }
    .layui-upload-img-box { float:left;  margin-bottom: 2px;margin-right: 2px; background: #e0e0e0;  padding: 1px; }
    .layui-upload-img {width: 82px; height: 82px; margin-bottom: 1px;}
</style>
{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-row">
                <div class="layui-col-xs10">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">所属物业</label>
                        <div class="layui-input-block">
                            <select name="property_id" lay-filter="property_id" lay-search>
                                <option value="">--请选择--</option>
                                {foreach $propertyData as $v}
                                <option value="{$v['id']}" {if ($propertyId == $v['id'])}selected{/if}>{$v['name']}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs2">
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid addProperty"> 添加物业 </button>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-xs5">
                    <div class="layui-form-item layui-input-group">
                        <div class="layui-input-split layui-input-prefix indispensable">楼栋单元</div>
                        <div class="layui-input-block" id="top_unit_id_show">
                            <input type="text" name="unit_id" placeholder="请选择物业" disabled id="product-room-data" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">第</div>
                        <input type="text" name="floor_name" placeholder="所属楼层"  class="layui-input">
                        <div class="layui-input-split layui-input-suffix">层 共</div>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="layui-input-group">
                        <input type="text" name="floor_total" placeholder="总层高"  class="layui-input">
                        <div class="layui-input-split layui-input-suffix">层</div>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-form-item">
                <div class="layui-col-xs5">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix indispensable">房屋名称</div>
                        <input type="text" name="room_name" lay-verify="require" autocomplete="off" placeholder="请输入房屋名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-xs2">
                    <div class="layui-input-group">
                        <input type="text" name="room_unit" placeholder="单位"  class="layui-input">
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix indispensable">房屋面积&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <input type="text" name="room_size" placeholder="房屋面积"  class="layui-input">
                        <div class="layui-input-split layui-input-suffix">㎡</div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-form-item">
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">房间户型</div>
                        <input type="text" name="room_num" placeholder="数量"  class="layui-input">
                        <div class="layui-input-split layui-input-suffix">室</div>
                    </div>
                </div>
                <div class="layui-col-xs2">
                    <div class="layui-input-group">
                        <input type="text" name="hall_num" placeholder="数量"  class="layui-input">
                        <div class="layui-input-split layui-input-suffix">厅</div>
                    </div>
                </div>
                <div class="layui-col-xs2">
                    <div class="layui-input-group">
                        <input type="text" name="who_num" placeholder="数量"  class="layui-input">
                        <div class="layui-input-split layui-input-suffix">卫</div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">朝向&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <input type="text" name="direction" placeholder="房间朝向"  class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-form-item">
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix indispensable">物业费用</div>
                        <input type="text" name="property_fee" placeholder="物业费用"  class="layui-input">
                        <div class="layui-input-split layui-input-suffix">¥/月</div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix indispensable">租金</div>
                        <input type="text" name="room_rent" placeholder="租金金额"  class="layui-input">
                        <div class="layui-input-split layui-input-suffix">¥/月</div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">押金</div>
                        <input type="text" name="room_deposit" placeholder="押金金额"  class="layui-input">
                        <div class="layui-input-split layui-input-suffix">¥/期</div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间标签</label>
                <div class="layui-input-block">
                    <input type="text" name="label_id" id="label" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间图片</label>
                <div class="layui-input-block" id="image_info">
                    <button type="button" class="layui-btn" id="upload_imgs" lay-data="{field: 'picture',data:{dir:'room/picture', field:'picture'}}">上传图片</button>
                    <div class="layui-upload-list" id="img_show"> </div>
                    <div style="clear: both"></div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item layui-hide">
                <button type="button" class="layui-btn layui-btn-primary replaceUploadImg toggleUpload" lay-data="{}"></button>
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<script id="top_unit_id_tpl" type="text/html">
    <select name="unit_id" lay-filter="unit_id" id="unit_id">
        <option value="">--请选择楼栋或单元--</option>
        {{# layui.each(d.unitList, function(index, elem) { }}
        <option value="{{elem.id}}">{{elem.full_unit_name}}</option>
        {{# }) }}
    </select>
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer','laytpl', 'layCascader'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,laytpl = layui.laytpl, layCascader = layui.layCascader;
        let labelCase = layCascader({
            elem: '#label',
            options: {:json_encode($labelData,JSON_UNESCAPED_UNICODE)},
        props: {
            multiple: true
        }
    });
        form.on('select(property_id)', function(res) {
            let value = res.value
            loadPropertyUnitList(value)
        })
        function loadPropertyUnitList(propertyId) {
            $.get('{:request()->url()}', {property_id:propertyId,get_type:'unitData'}, function(res) {
                if(res.code == 0) {
                    var getTpl = document.getElementById('top_unit_id_tpl').innerHTML; // 获取模板字符
                    var elemView = document.getElementById('top_unit_id_show'); // 视图对象
                    laytpl(getTpl).render({unitList:res.data}, function(str){
                        elemView.innerHTML = str;
                        form.render('select')
                    });
                }
            })
        }
        loadPropertyUnitList({$propertyId??''});

        $('#upload_imgs').selectImages({
            confirm:function(res,elem) {
                for(var i in res) {
                    index = (new Date()).getTime()+''+i;
                    $('#img_show').append('<div class="layui-upload-img-box" id="'+index+'">' +
                        '<img src="' + res[i].src + '" class="layui-upload-img checkPictureByImg">' +
                        '<input type="hidden" name="picture[]" value="' + res[i].src + '">' +
                        '<p>' +
                        '<a class="layui-btn layui-btn-xs cftoggleUpload" style="float: left" lay-data="{field: \'picture\',data:{dir:\'room/picture\', field:\'picture\', replace_upload_index: \''+index+'\'}}">修改</a>' +
                        '<a class="layui-btn layui-btn-xs layui-btn-danger" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);" style="float: right">删除</a>' +
                        '</p>' +
                        '</div>'
                    );
                }
            }
        });
        $(document).on('click', '.cftoggleUpload', function () {
            $('.toggleUpload').attr('lay-data', $(this).attr('lay-data'));
            $('.toggleUpload').trigger('click');
        });
        $('.replaceUploadImg').selectImages({
            confirm:function(res,elem,data) {
                let replaceUploadObj = $('#'+data.data.replace_upload_index);
                replaceUploadObj.find('img').attr('src', res[0].src);
                replaceUploadObj.find('img').attr('alt', res[0].src);
                replaceUploadObj.find('input').val(res[0].src);
            }
        });

        $('.addProperty').on('click', function() {
            var url = '{:url("propertyBasicAdd")}';
            var index = parent.layer.open({title: '添加物业',type: 2,shade: 0.2, maxmin:true,area: ['720px', '550px'], content: url, btnAlign: 'c' , btn: ['确定', '取消'] , yes: function (index, layero) {
                    var iframeWindow = parent.window['layui-layer-iframe' + index] , submit = layero.find('iframe').contents().find("#submitBtn");
                    iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                        var field = data.field; //获取提交的字段
                        var loadAdd = parent.layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                        $.post(url, field, function (res) {
                            parent.layer.close(loadAdd);
                            if (res.code === 0) {
                                parent.layer.close(index); //关闭弹层
                                window.location.reload(); //刷新整个页面
                                parent.layer.msg(res.msg, {icon: 6, offset: '15px'});
                            } else {
                                parent.layer.msg(res.msg, {icon: 5, offset: '15px'});
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });
    });
</script>
{/block}